上一节我们讲到了一个简单的典型的案例,现在来讲讲每个属性的详细解释
一般在构建动画中使用的素材动画工程师提供的模型来进行渲染,然后控制模型进行一些操作
// 场景、光照、材质、模型、渲染器、控制器、相机 if (!Detector.webgl) Detector.addGetWebGLMessage(); var container, stats, controls; var camera, scene, renderer, light; init(); animate(); function colorChange(event) { console.log(event.target.value); light.color.set(event.target.value); } function init() { // 创建容器 container = document.createElement('div'); document.body.appendChild(container); // 生成相机 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); // 设置相机位置 camera.position.set(-1.8, 0.9, 2.7); // 控制器 controls = new THREE.OrbitControls(camera); // 设置控制器目标位置 controls.target.set(0, -0.2, -0.2); controls.update(); // 切片路径 var path = '../three.js-master/examples/textures/cube/Bridge2/'; var suffix = '.jpg'; // 加载场景图片 var envMap = new THREE.CubeTextureLoader().load([ path + 'posx' + suffix, path + 'negx' + suffix, path + 'posy' + suffix, path + 'negy' + suffix, path + 'posz' + suffix, path + 'negz' + suffix ]); // 创建场景 scene = new THREE.Scene(); scene.background = envMap; // 光照 // A light source positioned directly above the scene, with color fading from the sky color to the ground color. light = new THREE.HemisphereLight(0xbbbbff, 0x111122); light = new THREE.AmbientLight(0x111122); light = new THREE.DirectionalLight(0x111122, 1); light.position.set(0, 1, 0); scene.add(light); // 创建模型 var loader = new THREE.GLTFLoader(); loader.load('../three.js-master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) { gltf.scene.traverse(function (child) { if (child.isMesh) { child.material.envMap = envMap; // child.material.needsUpdate = true; } }); scene.add(gltf.scene); }); // The WebGL renderer displays your beautifully crafted scenes using WebGL. // 渲染器 render = new THREE.WebGLRenderer({ antialias: true }); render.setPixelRatio(window.devicePixelRatio); render.setSize(window.innerWidth, window.innerHeight); render.gammaOutput = true; container.appendChild(render.domElement); stats = new Stats(); container.appendChild(stats.dom); } function animate() { requestAnimationFrame(animate); render.render(scene, camera); stats.update(); }
var scene, camera, controls, stats; var renderer, mixer; var clock = new THREE.Clock(); var url = '../three.js-master/examples/models/json/scene-animation.json'; var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight; var container = document.getElementById('container'); var stats = new Stats(); container.appendChild(stats.dom); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container.appendChild(renderer.domElement); // 使用加载器加载文件 new THREE.ObjectLoader().load(url, function (loadedScene) { scene = loadedScene; scene.background = new THREE.Color(0xffffff); scene.traverse(function (sceneChild) { if (sceneChild.type === 'PerspectiveCamera') { camera = sceneChild; camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT; camera.updateProjectionMatrix(); } }); if (camera === undefined) { camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000); camera.position.set(-200, 0, 200); } controls = new THREE.OrbitControls(camera); var geometry = new THREE.PlaneBufferGeometry(20000, 20000); var material = new THREE.MeshPhongMaterial({ shininess: 0.1 }); var ground = new THREE.Mesh(geometry, material); ground.position.set(0, -250, 0); ground.rotation.x = - Math.PI / 2; scene.add(ground); // 雾? scene.fog = new THREE.Fog(0x00ffff, 1000, 10000); var animationClip = scene.animations[0]; mixer = new THREE.AnimationMixer(scene); mixer.clipAction(animationClip).play(); animate(); }); function animate() { requestAnimationFrame(animate); render(); } // 渲染 function render() { // 获取时间 var delta = 0.75 * clock.getDelta(); mixer.update(delta); stats.update(); renderer.render(scene, camera); }
什么是Three.js
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
是一个易于使用,轻量级,跨浏览器,通用的3D库。当前的构建仅包含WebGL渲染器,但示例中还提供了WebGPU(实验性),SVG和CSS3D渲染器。
可以各种3d数据展示(图扑软件)
可以做游戏 (hexgl-bkcore)
至于怎么用就是一个复杂的问题,首先认识一下Three.js动画的基本构成
场景 scene
new THREE.Scene()
Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.(场景允许您设置由 three.js 渲染的内容和位置。这是您放置物体、灯光和相机的地方。)
场景是包含动画里所有的内容,是必不可少的部分
相机 camera
相机是用来观看场景的,相机的所看到的即所渲染出来,而相机种类又有多种
光源
不同的光的照射渲染结果也不同,如点光源,自然光,平行光等
材质
材质是一个物体的性状,不同的场景使用不同的材质,如使用高光材质可以反射光源,形成镜面效果
模型
在制作动画过程中,大多通过加载器来加载由3d软件制作而成的gltf模型文件,也有简单的可以通过内置的一些几何体来实现
控制器
通过控制器用户可以选转拖动操作模型,增强体验
以上六点就是动画的基本点,而每个点又对应有多个功能,这个放后面再讲
```javascript
// 生成场景
var scene = new THREE.Scene();
// 创建网格模型
// var geometry = new THREE.SphereGeometry(60, 40, 50);
var geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); // 一种非光泽表面的材质,没有镜面高光。
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 光源设置
var point = new THREE.PointLight(0xaaffaa);
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// 相机设置
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
function render(e) {
console.log(e);
// mesh.rotateY(0.01);
renderer.render(scene, camera);
// requestAnimationFrame(render)
}
// setInterval(render, 20)
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
```
结果
上一节我们讲到了一个简单的典型的案例,现在来讲讲每个属性的详细解释
一般在构建动画中使用的素材动画工程师提供的模型来进行渲染,然后控制模型进行一些操作1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137// 场景、光照、材质、模型、渲染器、控制器、相机
if (!Detector.webgl) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
init();
animate();
function colorChange(event) {
console.log(event.target.value);
light.color.set(event.target.value);
}
function init() {
// 创建容器
container = document.createElement('div');
document.body.appendChild(container);
// 生成相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机位置
camera.position.set(-1.8, 0.9, 2.7);
// 控制器
controls = new THREE.OrbitControls(camera);
// 设置控制器目标位置
controls.target.set(0, -0.2, -0.2);
controls.update();
// 切片路径
var path = '../three.js-master/examples/textures/cube/Bridge2/';
var suffix = '.jpg';
// 加载场景图片
var envMap = new THREE.CubeTextureLoader().load([
path + 'posx' + suffix, path + 'negx' + suffix,
path + 'posy' + suffix, path + 'negy' + suffix,
path + 'posz' + suffix, path + 'negz' + suffix
]);
// 创建场景
scene = new THREE.Scene();
scene.background = envMap;
// 光照
// A light source positioned directly above the scene, with color fading from the sky color to the ground color.
light = new THREE.HemisphereLight(0xbbbbff, 0x111122);
light = new THREE.AmbientLight(0x111122);
light = new THREE.DirectionalLight(0x111122, 1);
light.position.set(0, 1, 0);
scene.add(light);
// 创建模型
var loader = new THREE.GLTFLoader();
loader.load('../three.js-master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function (gltf) {
gltf.scene.traverse(function (child) {
if (child.isMesh) {
child.material.envMap = envMap;
// child.material.needsUpdate = true;
}
});
scene.add(gltf.scene);
});
// The WebGL renderer displays your beautifully crafted scenes using WebGL.
// 渲染器
render = new THREE.WebGLRenderer({
antialias: true
});
render.setPixelRatio(window.devicePixelRatio);
render.setSize(window.innerWidth, window.innerHeight);
render.gammaOutput = true;
container.appendChild(render.domElement);
stats = new Stats();
container.appendChild(stats.dom);
}
function animate() {
requestAnimationFrame(animate);
render.render(scene, camera);
stats.update();
}
````
![头盔][img3]
```javascript
var scene, camera, controls, stats;
var renderer, mixer;
var clock = new THREE.Clock();
var url = '../three.js-master/examples/models/json/scene-animation.json';
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container = document.getElementById('container');
var stats = new Stats();
container.appendChild(stats.dom);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
// 使用加载器加载文件
new THREE.ObjectLoader().load(url, function (loadedScene) {
scene = loadedScene;
scene.background = new THREE.Color(0xffffff);
scene.traverse(function (sceneChild) {
if (sceneChild.type === 'PerspectiveCamera') {
camera = sceneChild;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
}
});
if (camera === undefined) {
camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
camera.position.set(-200, 0, 200);
}
controls = new THREE.OrbitControls(camera);
var geometry = new THREE.PlaneBufferGeometry(20000, 20000);
var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
var ground = new THREE.Mesh(geometry, material);
ground.position.set(0, -250, 0);
ground.rotation.x = - Math.PI / 2;
scene.add(ground);
// 雾?
scene.fog = new THREE.Fog(0x00ffff, 1000, 10000);
var animationClip = scene.animations[0];
mixer = new THREE.AnimationMixer(scene);
mixer.clipAction(animationClip).play();
animate();
});
function animate() {
requestAnimationFrame(animate);
render();
}
// 渲染
function render() {
// 获取时间
var delta = 0.75 * clock.getDelta();
mixer.update(delta);
stats.update();
renderer.render(scene, camera);
}
什么是Three.js
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
是一个易于使用,轻量级,跨浏览器,通用的3D库。当前的构建仅包含WebGL渲染器,但示例中还提供了WebGPU(实验性),SVG和CSS3D渲染器。
可以各种3d数据展示(图扑软件)
可以做游戏 (hexgl-bkcore)
至于怎么用就是一个复杂的问题,首先认识一下Three.js动画的基本构成
场景 scene
new THREE.Scene()
Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.(场景允许您设置由 three.js 渲染的内容和位置。这是您放置物体、灯光和相机的地方。)
场景是包含动画里所有的内容,是必不可少的部分
相机 camera
相机是用来观看场景的,相机的所看到的即所渲染出来,而相机种类又有多种
不同的光的照射渲染结果也不同,如点光源,自然光,平行光等
材质是一个物体的性状,不同的场景使用不同的材质,如使用高光材质可以反射光源,形成镜面效果
在制作动画过程中,大多通过加载器来加载由3d软件制作而成的gltf模型文件,也有简单的可以通过内置的一些几何体来实现
通过控制器用户可以选转拖动操作模型,增强体验
以上六点就是动画的基本点,而每个点又对应有多个功能,这个放后面再讲
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 生成场景
var scene = new THREE.Scene();
// 创建网格模型
// var geometry = new THREE.SphereGeometry(60, 40, 50);
var geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何对象
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); // 一种非光泽表面的材质,没有镜面高光。
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 光源设置
var point = new THREE.PointLight(0xaaffaa);
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// 相机设置
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
function render(e) {
console.log(e);
// mesh.rotateY(0.01);
renderer.render(scene, camera);
// requestAnimationFrame(render)
}
// setInterval(render, 20)
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
结果
需要将本机或其他视频源的数据进行二次加工再直播给用户的时候使用此套工具可以在不需要过多专业知识及代码开发的情况下即可完成
场景1
某交通大数据监督平台需将不同路口的监控画面实时转播到用户端,且可实时拖拽的实现切换监控画面,播放不同的背景音乐
场景2
某射击场需将不同靶道的监控画面经过导演的裁切再转播到用户端
more >>
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia-plus根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
燕十三